import 'package:flutter/material.dart';

import 'MyAppBar.dart';

class MyStackWidet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CommonBar(title: '(stack)层叠布局'),
      body: Center(
        child: Column(
          children: [
            Expanded(child: MyStack(context)),
            Expanded(
                child: Center(
              child: StackPosition(context),
            ))
          ],
        ),
      ),
    );
  }

  //多层布局
  Widget StackPosition(BuildContext context) {
    return new Stack(children: [
      CircleAvatar(
        backgroundImage: new NetworkImage(
            'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1466681785,2890500789&fm=26&gp=0.jpg'),
        radius: 100.0,
      ),
      new Positioned(
        child: Container(
          child: new Text(
            '签名',
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              backgroundColor: Colors.lightBlue,
            ),
          ),
          // margin: EdgeInsetsGeometry,
        ),
        top: 10.0,
        left: 80.0,
      ),
      new Positioned(
        child: new Text(
          '姓名',
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            backgroundColor: Colors.lightBlue,
          ),
        ),
        bottom: 10.0,
        left: 80.0,
      )
    ]);
  }

  //两层布局
  Widget MyStack(BuildContext context) {
    return new Stack(
      alignment: const FractionalOffset(0.5, 0.94),
      children: [
        Container(
          child: CircleAvatar(
            backgroundImage: new NetworkImage(
                'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1466681785,2890500789&fm=26&gp=0.jpg'),
            radius: 100.0,
          ),
          width: 150.0,
          height: 150.0,
        ),
        Container(
          decoration: new BoxDecoration(
              gradient: const LinearGradient(
                  colors: [Colors.orangeAccent, Colors.lightBlue])),
          padding: EdgeInsets.all(5.0),
          child: new Text(
            '我的昵称',
            style: TextStyle(
              fontSize: 10.0,
              color: Colors.white,
            ),
          ),
        )
      ],
    );
  }
}
